<template>
  <div class="nav-content" v-if="!isWeChatBrowser">
    <van-sticky>
      <div class="flex-row flex-align-center nav-header">
        <div class="c-px2m9s flex-row flex-align-center">
          <div>
            <van-icon
              name="arrow-left"
              class="search-arrow-left"
              @click="handleClick()"
              v-if="isShowLeft"
            />
          </div>
          <div v-if="isShowLeft" class="nav-header-left">
            <slot name="left" />
          </div>
          <div v-else class="nav-header-left">
            <slot name="left" />
          </div>
        </div>
        <div class="content-main" >
          <slot name="content">{{titleFlag?obj.productName:title}}</slot>
        </div>
        <div class="c-px2m9s-right"><slot name="right" /></div>
      </div>
    </van-sticky>
  </div>
</template>
<script>
import isAppBack from '@/mixin/isAppBack'
import { isWeChatBrowser } from '@/config/h5/index'
import { isApp } from '@/utils/platform'
import API from '@/services/h5/common'
export default {
  mixins: [isAppBack],
  props: {
    isShowLeft: {
      type: Boolean,
      default: true
    },
    textTitle: {
      type: String,
      default: undefined
    },
    titleFlag: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      isWeChatBrowser,
      title: '',
      titleShow: false,
      currTitle: '',
      obj: {
        productName: '',
        partnerName: '',
        productUrl: '',
        msg: null
      }
    }
  },
  created() {
    this.title = this.$route.name
    if(!isApp) {
      this.titleShow = true
    }
  },
  mounted() {
    let that = this
    this.obj = {
      productName: '',
      partnerName: '',
      productUrl: '',
      msg: '',
    }
    // console.log("titleFlag",this.titleFlag,this.$route.query.userId)
    this.$router.onReady(() => {
      that.currTitle = that.$route.query.productName
    })
    if(this.titleFlag) {
      this.init()
    }
    
  },
  /* watch: {
    titleFlag(newValue,oldValue) {
      console.log(newValue,oldValue)
    }
  }, */
  methods: {
    handleClick() {
      this.judgeAppBack()
    },
    init() {
      let params = {
        productId: this.$route.query.productId,
        userId:this.$route.query.userId
      }
      API.getonlineProduct(params)
        .then(res => {
          if (res.data && res.data.code === 1000) {
            this.obj = res.data.data
            this.msg = null
          }
        })
        .catch(err => {
          if (err.data && err.data.code === 2008) {
            this.obj = err.data.data
            this.msg = err.data.msg
          }
        })
    }
  }
}
</script>
<style scoped lang="less">
.nav-content {
  z-index: @c-zindex-nav;
  font-size: 16px;
  color: #333;
  text-align: center;
  box-shadow: rgba(0, 0, 0, 0.05) 0 1px 2px 0;
}
.nav-header {
  padding: @c-gap-nav-header;
  background-color: @c-navbar-bg;
  position: relative;
}
.nav-header-left {
  margin-left: 5px;
}
.content-main {
  flex: 1;
}
.c-px2m9s {
  position: absolute;
  left: 15px;
  &-right {
    position: absolute;
    right: 15px;
  }
}
</style>
